const { defineConfig } = require("@vue/cli-service");
const scssPass = require("./src/util/scss.pass");
const path = require("path");
const webpack = require("webpack");
// const merge = require("webpack-merge"); // 合并配置
const variable = require("./src/maps/color");
const configTarget = require("./src/configs/env");
let getPages = require("./src/util/getPages");
console.log("环境", configTarget);
const configs = require(`./src/configs/config.${configTarget}.js`);

const CopyWebpackPlugin = require("copy-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
// const entrys = require("./src/pages");
const resolve = (dir) => {
  return path.join(__dirname, dir);
};

var getAssetsDir = (function () {
  return process.env.NODE_ENV === "production" ? "./static" : "static";
})();
module.exports = defineConfig({
  pages: getPages(),
  publicPath: configs.cdnPath,
  // assetsDir: configs.cdnPath,
  outputDir: "h5-base",
  assetsDir: getAssetsDir,
  transpileDependencies: [], //默认情况下 babel-loader 会忽略所有 node_modules 中的文件。如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
  // 在生产环境下为 Babel 和 TypeScript 使用 `thread-loader`
  // 在多核机器下会默认开启。
  // parallel: require('os').cpus().length > 1,
  parallel: true,
  // 如果你不需要使用eslint，把lintOnSave设为false即可
  lintOnSave: false,
  // pages: { ...entrys
  // },
  chainWebpack: (config) => {
    config.resolve.alias
      .set("_a", resolve("src/assets"))
      .set("@", resolve("src")) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set("_c", resolve("src/components"))
      .set("_u", resolve("src/util"))
      .set("_s", resolve("src/store"))
      .set("_m", resolve("src/maps"))
      .set("_api", resolve("src/request/apilLst.js"))
      .set("_d", resolve("dependency"));
    // config.plugin("html").tap((args) => {
    //   args[0].title = configs.title;
    //   return args;
    // });
    // config.module
    //   .rule("scss")
    //   .oneOf("vue")
    //   .use("px2rem-loader")
    //   .loader("px2rem-loader")
    //   .before("postcss-loader") // this makes it work.
    //   .options({ remUnit: 100, remPrecision: 8 })
    //   .end();
  },
  // 设为false打包时不生成.map文件
  productionSourceMap: false,

  devServer: {
    hot: true,
    port: 8888,
    proxy: {
      [configs.baseUrl]: {
        target: "http://127.0.0.0:8080",
        changeOrigin: true,
        ws: true, //是否启用websockets
        pathRewrite: {
          //重写代理路径
          [`^${configs.baseUrl}`]: "",
        },
      },
    },
  },
  css: {
    // 将组件内的 CSS 提取到一个单独的 CSS 文件 (只用在生产环境中)
    extract: false,

    // 是否开启 CSS source map？
    sourceMap: false,

    // 为预处理器的 loader 传递自定义选项。比如传递给
    // sass-loader 时，使用 `{ sass: { ... } }`。
    loaderOptions: {
      sass: {
        // SCSS 全局变量
        // data: `@import "@/assets/css/common.scss";`
        additionalData: `${scssPass(variable)}`,
        implementation: require("sass"),
      },
      less: {
        lessOptions: {
          javascriptEnabled: true,
          // globalVars: {
          //   hack: `true; @import '~@/assets/less/variables.less';`
          // }
          modifyVars: {
            ...variable,
          },
        },
      },
      // 为所有的 CSS 及其预处理文件开启 CSS Modules。
      // 这个选项不会影响 `*.vue` 文件。
      css: {
        // modules: {
        //   auto: () => true,
        //   localIdentName: "[path][name]__[local]--[hash:base64:5]",
        // },
        url: {
          filter: (url) => url[0] !== "/",
        },
      },
    },
  },
  configureWebpack: (config) => {
    if (process.env.NODE_ENV === "production") {
      //生产环境清除旧目录文件
      config.plugins.push(
        new CleanWebpackPlugin({
          dry: false,
          cleanOnceBeforeBuildPatterns: [path.join(process.cwd(), "../static")],
          dangerouslyAllowCleanPatternsOutsideProject: true,
        })
      );
      // config.devtool = "module-eval-source-map";
    } else {
      config.devtool = "source-map";
      // mutate config for production...
    }
    //追加静态资源目录
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: "./src/static", // 新增可以被index.html访问的静态文件目录,支持多个
            to: getAssetsDir,
          },
        ],
      })
    );
    config.plugins.push(
      new webpack.NormalModuleReplacementPlugin(/configs\/config.js/, function (
        resource
      ) {
        resource.request = resource.request.replace(
          "configs/config",
          `configs/config.${configTarget}`
        );
      })
    );
  },
});
